<template>
	<view>
		<view>
			<view class="ship" v-if="deoList[0]">
				<view class="ship-fenm" @click="playVideo(current)" v-if="titleImgShow">
					<image :src="deoList[0].image" mode="aspectFill"></image>
					<cover-image class="cor-imag" src="/static/img/Home/bufan.png"
						@click="playVideo(current)"></cover-image>
				</view>
				<video v-if="!titleImgShow" @ended="videoEnd" :autoplay="auto" id="myVideo" :src="deoList[indexop].video_path"
					:controls="true" style="width: 750rpx;" :show-center-play-btn="true" :enable-progress-gesture="true"
					:show-fullscreen-btn="shieldvideo">
				</video>
				<cover-view class="shuiy">
					仅供学习交流，请勿转载!
				</cover-view>
			</view>
			<view class="sp-dibu" v-if="deoList[0]">
				<view class="ship-bt">
					{{ deoList[0].title }}
				</view>
				<view class="ship-kongj">
					<view class="kongj-1" @click="onclicki">{{ beishu }} <u-icon name="arrow-down-fill"
							size="18"></u-icon></view>
					<view v-for="(item, index) in typeList" :key="index">
						<view v-if="index == typeIndex">
							<view class="kongj-1" v-show="true" @click="ppc(index)">{{ item }}
								<u-icon name="arrow-down-fill" size="18"></u-icon>
							</view>
						</view>
						<view v-else>
							<view class="kongj-1" v-show="false" @click="ppc(index)">{{ item }}
								<u-icon name="arrow-down-fill" size="18"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="sp-xian"></view>
				<view class="ship-tm">
					课程大纲
				</view>
				<view class="dibu-list" v-for="(item, indexo) in list" :key="indexo" v-show="true"
					@click="ship(indexo, item)">
					<view class="list-1">
						<view class="list-bt">
							<view style="display: flex;">
								<text class="text-1" v-if="item.type == 1" :class="item.id == deoList[0].id ? 'text-5': ''">视频
								</text>
								<text class="text-1" v-if="item.type == 3" :class="item.id == deoList[0].id ? 'text-5': ''">文章
								</text>
								<!-- 视频标题显示 -->
								<view class="text-2" v-if="item.type == 1" :class="item.id == deoList[0].id ? 'stacts': ''">
									{{ item.title }}
								</view>
								<!-- 文章标题显示 -->
								<view class="text-2 text-3" v-if="item.type == 3"
									:class="item.id == deoList[0].id ? 'stacts': ''">
									{{ item.title }}
								</view>
								<view class="list-sj" v-if="item.is_pay == 0 && item.price > 0">
									<u-icon name="rmb-circle"></u-icon>
									<text>{{ item.price }}</text>
								</view>
								<view class="list-sj" v-else-if="item.type == 1">
									<u-icon name="clock"></u-icon>
									<text>{{ item.time }}</text>
								</view>
								<view class="list-2">
									<view v-if="item.is_pay">
										<view v-if="item.type == 1">
											<image src="/static/img/Home/zanting.png" v-if="item.id == deoList[0].id ? true: false "></image>
											<image src="/static/img/Home/zanting1.png" v-else></image>
										</view>
										<view v-if="item.type == 3">
											<image src="/static/img/Home/sousuo.png" v-if="item.id == deoList[0].id ? true: false"></image>
											<image src="/static/img/Home/sousou1.png" v-else></image>
										</view>
									</view>
									<view v-else>
										<view >
											<view v-if="item.type == 1">
												<image src="/static/img/Home/zanting.png" v-if=" item.id == deoList[0].id ? true: false">
												</image>
												<image src="/static/img/Home/zanting1.png" v-else></image>
											</view>
											<view v-if="item.type == 3">
												<image src="/static/img/Home/sousuo.png" v-if=" item.id == deoList[0].id ? true: false">
												</image>
												<image src="/static/img/Home/sousou1.png" v-else></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 180rpx;"></view>


		</view>
		<view>
			<u-popup v-model="show" mode="bottom" border-radius="50">
				<view class="tanchu1">
					<view style="height: 60rpx;"></view>
					<view class="tanchu1-bt">选择速率</view>
					<view v-for="(item, index) in listbeishu" :key="item.id">
						<view class="tanchu1-beis" @click="ppo(item, index)" :class=" ioc == index ? 'stacts' : '' ">
							{{ item.text }}
						</view>
					</view>
					<view class="dibu-quxiao" @click="poix">取消</view>
				</view>
			</u-popup>
			<u-popup v-model="showo" mode="bottom" border-radius="50">
				<view class="tanchu1">
					<view style="height: 60rpx;"></view>
					<view class="tanchu1-bt">定时开关</view>
					<view class="tanchu1-beis" @click="ppoo(item)" :class=" ioc == index ?'stacts' : '' "
						v-for="(item,index) in listsj" :key="item.id">{{ item.text }}</view>
					<view class="dibu-quxiao" @click="poix">取消</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		apiGetVideoDetails
	} from '@/api/school';
	export default {
		data() {
			return {
				titleImgShow: true,
				danmuList: '',
				indexop: 0,
				show: false,
				showo: false,
				ioc: 2,
				beishu: '1.0x',
				shij: '定时关闭',
				listbeishu: [{
						id: 0.5,
						text: '0.5x'
					},
					{
						id: 0.8,
						text: '0.8x'
					},
					{
						id: 1.0,
						text: '1.0x'
					},
					{
						id: 1.25,
						text: '1.25x'
					},
					{
						id: 1.5,
						text: '1.5x'
					},
					// {
					// 	id: 2.0,
					// 	text: '2.0x'
					// },
				],
				listsj: [{
						id: 0,
						text: '不开启'
					},
					{
						id: 1,
						text: '播放完当前课程'
					},
					{
						id: 2,
						text: '10分钟'
					},
					{
						id: 3,
						text: '20分钟'
					},
					{
						id: 4,
						text: '30分钟'
					},
					{
						id: 5,
						text: '60分钟'
					},
				],
				list: [],
				current: {},
				videoContext: {},
				isLoading: false,
				typeList: ['单课播放', '顺序播放'],
				typeIndex: 0,
				id: 0,
				auto: false,
				goods_id: 0,
				courseInfo: {},
				shieldvideo: false,
				platform: '',
				deoList:[],
				deoIndex:0
			}
		},
		// 监听页面显示的时候调用接口，重新获取数据
		onShow() {

		},
		onLoad(option) {
			
			if (!option.id) {
				this.app.showToast('课程参数有误', '/pages/school/school');
			} else {
				this.id = option.id;
				this.getCourseList(option.id)
			}
			this.typeIndex = uni.getStorageSync('video_play_type') == '' ? 0 : uni.getStorageSync('video_play_type');

			this.platform = uni.getSystemInfoSync().platform
			if (this.platform != 'ios') {
				this.shieldvideo = true
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onHide() {

		},
		methods: {
			ppc(index) {
				if (index == 0) {
					this.typeIndex = 1;
				} else {
					this.typeIndex = 0;
				}
				uni.setStorageSync('video_play_type', this.typeIndex);
			},
			ship(indexo, item) {
				uni.setStorageSync('SchoolList',item)
				if(item.id === this.deoList[0].id){
					return
				}
				let url
				if(item.type == 3){
					url = '/pagesSchool/pages/essay?id=' + item.course_id;
				}else{
					url = '/pagesSchool/pages/frequency?id=' + item.course_id;
				}
				uni.redirectTo({
					url: url
				})
			},
			onclicko() {
				this.showo = true
			},
			videoErrorCallback(e) {
				console.log(e);
			},
			onclicki() {
				this.show = true
			},
			ppoo(i) {
				this.ioc = i.id
				this.shij = i.text
				this.showo = false
			},
			ppo(i, index) {
				this.videoContext.playbackRate(
					i.id
				) 
				this.ioc = index
				this.beishu = i.text
				this.show = false
			},
			poix() {
				this.show = false
				this.showo = false
			},
			getCourseList(id) {
				apiGetVideoDetails({
					id
				}).then(res => {
					console.log(res);
					const vidoList = uni.getStorageSync('SchoolList')
					let arr = []
					arr = res.shop_course_item
					this.deoList = arr.filter(item=> item.id === vidoList.id )
					console.log(this.deoList,'this.deoList');
					this.list = res.shop_course_item
				})
			},
			getVideoToken(item, indexo) {
				var that = this;
				this.$u.get('school/api.train_topic/getVideoToken', {
					id: item.id
				}).then(res => {
					that.current = item;
					that.indexop = indexo;
					if (res.code == 1) {
						that.current.videourl = res.data.src;
						if (item.id != that.id) {
							that.auto = true;
						}
					}
				});
			},
			buyBtn() {
				if (this.isLoading == true) {
					return false;
				}

				let data = {};
				data.goods_id = this.goods_id
				data.sku_id = 0;
				data.number = 1;
				data.type = 'onbuy'
				data.prom_type = 0;
				data.prom_id = 0;
				data.buy_notice = 1;
				this.isLoading = true;

				this.$u.post('shop/api.flow/addCart', data).then(res => {
					this.isLoading = false;

					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
						return false;
					} else {
						this.gotoPage('/pages/shop/flow/checkOut?recids=' + res.data.rec_id);
					}
				}).catch(res => {
					this.isLoading = false;
				})
			},
			gotoPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			videoEnd(e) {
				let play_type = uni.getStorageSync('video_play_type');
				if (play_type == 1) {
					//是否还有下一课
					var that = this;
					let next = that.indexop + 1;
					if (typeof(that.list[next]) != 'undefined') {
						this.$u.toast('即将为您播放下一节~');
						setTimeout(function() {
							that.ship(next, that.list[next]);
						}, 2000);
					}
				}
			},
			playVideo(current) {
				this.auto = true;
				this.titleImgShow = false;
				return
				let authcode = uni.getStorageSync("authcode");
				if (authcode == '') {
					this.app.CHECK_LOGIN();
					return;
				}
				if (current.is_pay == 0 && current.price > 0) {
					let that = this;
					uni.showModal({
						title: '温馨提示',
						content: '本节课需购买才能观看哦~',
						showCancel: true,
						confirmText: '立即购买',
						cancelText: '残忍放弃',
						success: function(res) {
							if (res.confirm) {
								that.goods_id = current.goods_id
								that.buyBtn();
							}
						}
					})
					return;
				}
				this.videoContext = uni.createVideoContext('myVideo');
				this.auto = true;
				this.titleImgShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.dibut {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;

		view {
			width: 691rpx;
			height: 75rpx;
			background: #F76E00;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 75rpx;
			text-align: center;
		}
	}

	.text-5 {
		background-color: #FF8200 !important;
		color: #ffffff !important;
	}

	.stacts {
		color: #F76E00 !important;
	}

	.text-3 {
		width: 460rpx !important;
	}

	.ship {
		width: 750rpx;
		height: 430rpx;
		margin-bottom: 40rpx;
		position: relative;

		.shuiy {
			position: fixed;
			top: -130rpx;
			z-index: 999;
			color: rgba(#fff, .4);
			font-size: 20rpx;
		}

		.ship-fenm {
			width: 750rpx;
			height: 430rpx;
			position: absolute;
			top: 0;

			image {
				width: 750rpx;
				height: 430rpx;
			}

			.cor-imag {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: 25%;
				left: 37%;
				transform: translate(50%, 50%);
			}
		}
	}

	.sp-dibu {
		width: 687rpx;
		background: #FFFFFF;
		margin: 0 auto;
		padding-top: 49rpx;
		padding-bottom: 20rpx;

	}

	.tanchu1 {
		width: 100%;
		padding-left: 16rpx;
		padding-right: 16rpx;

		.tanchu1-bt {
			border-left: 6rpx solid #F76E00;
			padding-left: 10rpx;
			margin-bottom: 20rpx;
			font-weight: 600;
		}

		.tanchu1-beis {
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: #dfdfdf solid 1rpx;
			color: #c3c3c3;
			font-size: 26rpx;
		}

		.dibu-quxiao {
			width: 100%;
			height: 80rpx;
			margin-top: 30rpx;
			border-radius: 50rpx;
			background-color: #c3c3c3;
			text-align: center;
			line-height: 80rpx;
			margin-bottom: 10rpx;
		}
	}

	.ship-tm {
		font-weight: 400;
		font-size: 29rpx;
		color: #000000;
		border-left: #F76E00 6rpx solid;
		padding-left: 10rpx;
		margin-left: 39rpx;
		margin-top: 33rpx;
		margin-bottom: 30rpx;
	}

	.dibu-list {
		display: flex;
		// justify-content: center;
		align-items: center;
		width: 614rpx;
		height: 61rpx;
		margin: 0 auto;
		background: #F5F5F5;
		margin-bottom: 20rpx;
		border-radius: 16rpx;


		.list-1 {
			width: 611rpx;
			height: 61rpx;
			margin-right: 10rpx;
			position: relative;

			.list-bt {
				font-weight: bold;
				display: inline-block;

				.text-1 {
					width: 40rpx;
					height: 30rpx !important;
					line-height: 30rpx;
					background: #838383;
					border-radius: 4rpx;
					font-weight: 400;
					font-size: 16rpx;
					color: #FFFFFF;
					text-align: center;
					margin-left: 11rpx;
					margin-top: 18rpx;
				}

				.text-2 {
					width: 390rpx;
					line-height: 61rpx;
					word-break: keep-all;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 8rpx;
					font-weight: 300;
					font-size: 30rpx;
					color: #838383;
				}

			}

			.list-sj {
				display: inline-block;
				margin-top: 6rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				height: 100%;
				line-height: 55rpx;

				// margin-left: -40rpx;
				text {
					margin-left: 6rpx;
				}
			}
		}

		.list-2 {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(-50%, -50%);

			image {
				width: 27rpx;
				height: 27rpx;

			}
		}
	}

	.ship-kongj {
		width: 450rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		color: #A3A6BA;
		font-size: 26rpx;
		margin-top: 12rpx;
		margin-left: 43rpx;

		.kongj-1 {
			padding: 0 6rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 10rpx;
			border: 1rpx solid #8F94AC;
			margin-right: 8rpx;
		}
	}

	.ship-bt {
		margin-left: 47rpx;
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #000000;
		line-height: 20rpx;

		text {
			margin-left: 8rpx;
			margin-right: 8rpx;
		}
	}

	.sp-xian {
		width: 615rpx;
		border: 1px solid #d5d3d3;
		margin: 0 auto;
		margin-top: 38rpx;
	}

	.dibut {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			width: 691rpx;
			height: 75rpx;
			background: #F76E00;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 75rpx;
		}
	}
</style>